<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    html,
    body,
    div,
    section,
    ul,
    li,
    input {
      margin: 0;
      padding: 0;
    }

    .container {
      margin: 100px auto;
      width: 600px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .inputBox input {
      box-sizing: border-box;
      width: 100%;
      height: 60px;
      border: none;
      outline: none;
      padding: 0 15px 0 60px;
      font-size: 18px;

    }

    .inputBox {
      position: relative;
    }

    .inputBox button {
      position: absolute;
      background-color: #fff;
      border: none;
      width: 50px;
      height: 50px;
      top: 50%;
      /* left: 15px; */
      font-size: 20px;
      font-weight: 700;
      color: rgb(190, 190, 190);
      transform: translateY(-50%);
    }


    .container footer {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      padding: 0 15px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }

    .container footer div {
      padding: 0 30px;
    }

    .container footer button {
      box-sizing: border-box;
      height: 20px;
      cursor: pointer;
      border: 1px solid transparent;
      margin: 0 20px;
      font-weight: 500;
      font-size: 14px;
      background-color: transparent;
    }

    .container footer button:hover {
      border: 1px solid aqua;
    }

    .container footer span {
      position: absolute;
      cursor: default;
    }

    .container footer span:first-of-type {
      left: 15px;
    }

    .container footer span:last-of-type {
      right: 15px;

    }

    .container footer span:last-of-type:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    li {
      position: relative;
      margin-top: -1px;
      list-style: none;
      width: 100%;
      height: 60px;
      border: 1px solid #eee;
      border-collapse: collapse;
      line-height: 60px;
    }

    ul {
      width: 100%;
    }

    /* x */
    ul li button {
      position: absolute;
      width: 50px;
      height: 100%;
      color: rgb(253, 129, 107);
      font-size: 20px;
      font-weight: 700;
      right: 0;
      border: none;
      background-color: #fff;
    }

    ul li button:hover {
      color: rgb(255, 38, 0);
    }

    .todolist label {
      display: inline-block;
      height: 100%;
    }

    .todolist .text {
      position: absolute;
      top: 0;
      left: 60px;
      width: calc(100% - 70px);
    }

    .todolist .el-input {
      position: absolute;
      left: 59px;
      top: 0;
      width: calc(100% - 60px);
    }

    .todolist .el-input input[type="text"] {
      height: 60px;
      padding: 0;
      font-size: 16px;
      box-sizing: content-box;
    }

    .el-checkbox {
      margin-right: 0;
    }

    .el-checkbox .el-checkbox__input {
      padding: 0 10px;
    }

    .el-checkbox .el-checkbox__inner {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }

    .el-checkbox__inner::after {
      height: 25px;
      width: 12px;
      left: 12px;
      top: 3px;
    }
  </style>
</head>

<body>
  <div id="app">
    <section class="container">
      <div class="inputBox">
        <button @click="allFlag=!allFlag"><i class="el-icon-arrow-down"></i></button>
        <input type="text" v-model="msg" @keyup.enter="add" placeholder="To do something...">
      </div>
      <div class="todolist">
        <ul v-if="list.length">
          <template v-for="(item,index) of listCpt">
            <li @mouseover="item.delable=true" @mouseleave="item.delable=false">
              <el-checkbox v-model="item.status" name="checkbox" v-show="!item.editable"></el-checkbox>
              <label @dblclick="modify(index)" class="text"><span :style="wasDone(item)">{{item.msg}}</span></label>
              <button @click="del(index)" v-show="item.delable"><i class="el-icon-delete"></i></button>
              <el-input v-show="item.editable" v-model="item.msg" @blur="item.editable=false" ref="inputVal"></el-input>
            </li>
          </template>
        </ul>
        <footer v-show="list.length">
          <!-- <span>left</span> -->
          <div>
            <button @click="mode=0">{{'all('+list.length+')'}}</button>
            <button @click="mode=1">active</button>
            <button @click="mode=2">completed</button>
          </div>
          <span @click="clearComplete">Clear completed</span>
        </footer>
      </div>
    </section>
  </div>

  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '',
        mode: 0,
        list: [],
        allFlag: false
      },
      computed: {
        listCpt() {
          return this.list.filter(
            item => {
              if (this.mode === 1) {
                return item.status === false
              }
              else if (this.mode === 2) {
                return item.status === true
              }
              else {
                return item
              }
            }
          )
        }
      },
      watch: {
        allFlag() {
          this.list = this.list.map(
            item => {
              item.status = this.allFlag
              return item
            })
        }
      },
      methods: {
        add() {//增
          if (this.msg) {
            this.list.push({ msg: this.msg, status: false, editable: false, delable: false })
            this.msg = ''
          }
        },
        del(index) {//删
          this.list.splice(index, 1)
        },
        modify(index) {
          this.list[index].editable = true
          this.$nextTick(() => {
            this.$refs.inputVal[index].focus()
          })
        },
        wasDone(item) {
          if (item.status === true) {
            return { color: '#eee', textDecoration: 'line-through' }
          }
          else return {}
        },
        clearComplete() {
          this.list = this.list.filter(
            item => {
              return item.status === false
            })
        }
      }
    })
  </script>
</body>

</html>